<template>
    <el-container style="width:1100px">
        <el-header>
            <el-card shadow="always">
                <div style="font-size:16px">我的钱包</div>
            </el-card>
        </el-header>
        <el-main>
            <el-card shadow="always" style="height:600px">
                <div class="wallet">
                    <div>
                        <span class="balance">钱包余额 </span>
                        <el-icon :size="16">
                            <InfoFilled />
                        </el-icon>
                    </div>
                    <div>
                        <h1>￥0.00</h1>
                    </div>
                    <div class="button">
                        <el-button disabled color="deeppink">提现</el-button>
                    </div>
                    <div class="kefu">
                        <el-icon :size="16">
                            <Service />
                        </el-icon>
                        <span> 联系客服</span>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top:10px">
                <div style="margin-top:10px;font-size:16px">
                    钱包明细&nbsp&nbsp
                    <el-icon :size="16">
                        <InfoFilled />
                    </el-icon>
                    <el-divider />
                    <el-table></el-table>
                </div>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { Service, InfoFilled } from "@element-plus/icons-vue"
</script>

<style lang="less" scoped>
.wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 500px;

    .balance {
        font-size: 16px;
    }

    .el-button {
        width: 200px;
        height: 50px;
        border-radius: 2px;
        border: 0;
        color: white;
    }

    .kefu {
        font-size: 16px;

    }
}
</style>

